import React from 'react';
import { Collapse, InterviewIM } from '@/molecules';
import { useCollapse } from '@/hooks';
import { QuestionDetail, EstimateDetail, ArrangeDetail } from '../containers';

const Container = ({ children }) => <div style={{ width: 900 }}>{children}</div>;
const { Panel } = Collapse;
export default function InterviewSummarizingDetail({ data }) {
    const { interviewConclusionVO } = data || {};
    const { interviewArranges, interviewEvaluateResults, interviewQuestions, interviewArrangeResults } =
        interviewConclusionVO || {};
    const resultType = interviewArrangeResults?.[0]?.resultType ?? -1;
    const { recordTimeInfo, recordUrl, imGroupId, interviewRoundName } = interviewArranges;
    const { activeKey, onChange } = useCollapse(['1', '2', '3', '4'], []);
    return (
        <div>
            <Collapse bordered={false} activeKey={activeKey} onChange={onChange}>
                <Panel header="新员工面谈安排" key="1">
                    <ArrangeDetail data={interviewArranges} date />
                </Panel>
                <Panel header="面谈评估" key="2">
                    <Container>
                        <EstimateDetail
                            interviewEvaluateResults={interviewEvaluateResults}
                            interviewArrangeResults={interviewArrangeResults}
                            interviewStatus={resultType}
                            audioUrl={recordUrl}
                            completeTimeJson={recordTimeInfo}
                        />
                    </Container>
                </Panel>
                <Panel header="面谈自定义问题" key="3">
                    <Container>
                        <QuestionDetail
                            data={interviewQuestions}
                            audioUrl={recordUrl}
                            completeTimeJson={recordTimeInfo}
                        />
                    </Container>
                </Panel>
                {resultType !== -1 && !!imGroupId && (
                    <Panel header="面谈总结" key="4">
                        <Container>
                            <InterviewIM groupId={imGroupId} title={interviewRoundName} readOnly></InterviewIM>
                        </Container>
                    </Panel>
                )}
            </Collapse>
        </div>
    );
}
